<template>
  <div class="container">
    <div class="center-container">
      <el-form :model="userForm" :rules="rules" ref="userForm" label-width="100px"
               class="demo-userForm">
        <el-form-item label="提现金额" prop="amt">
          <el-input v-model="userForm.amt"></el-input>
        </el-form-item>

        <el-form-item label="证件类型" prop="idCardType">
          <el-select v-model="userForm.idCardType" placeholder="请选择证件类型">
            <el-option value="1" label="居民身份证"></el-option>
            <el-option value="2" label="护照"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="证件号" prop="idCard">
          <el-input v-model="userForm.idCard"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('userForm')">保 存</el-button>
          <el-button @click="resetForm('userForm')">重 置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      @close="closeDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center>
      <span><pre>{{ userForm }}</pre></span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {cardid} from "@/utils/validate";

export default {
  name: "validate-01",
  data() {
    let checkAmt = (rule, value, callback) => {
      if (value === '' || value === null) {
        callback(new Error('请输入提现金额'));
      } else if (value > 9999999.99) {
        //金额总长度不能大于10，包含小数点 value.toString().length > 10
        //数据库存储的类型为decimal(10,2),所以值不能大于9999999.99
        callback(new Error('提现金额不能大于9999999.99'));
      } else {
        callback();
      }
    }
    let checkIdCard = (rule, value, callback) => {
      if (!this.userForm.idCardType) {
        this.$refs.userForm.validateField('idCardType');
      } else {
        let idCardType = this.userForm.idCardType;
        if (idCardType == 1) {
          //居民身份证
          console.log(cardid(value))
          if (!cardid(value)[0]) {
            //todo 校验未成年
            callback();
          } else {
            callback(new Error(cardid(value)[1]))
          }
        } else if (idCardType == 2) {
          //护照
          let pattern = /^[a-zA-Z0-9]{3,20}$/;
          if (!pattern.test(value)) {
            callback(new Error("护照格式错误"))
          }
        } else {
          callback();
        }
      }
    }
    return {
      userForm: {
        idCard: '',
        idCardType: '',
        amt: '',
      },
      rules: {
        amt: [
          {required: true, message: '请输入提现金额', trigger: ['blur', 'change']},
          {pattern: /^\d+(\.\d{1,2})?$/, message: '金额格式错误', trigger: ['blur', 'change']},
          {validator: checkAmt, trigger: ['blur', 'change']}
        ],
        idCardType: [
          {required: true, message: '请选择证件类型', trigger: ['blur']},
        ],
        idCard: [
          {required: true, message: '请输入证件号', trigger: ['blur', 'change']},
          {validator: checkIdCard, trigger: ['blur', 'change']}
        ],
      },

      centerDialogVisible: false,
    };
  },
  methods: {
    closeDialog() {
      this.centerDialogVisible = false;
      this.$refs.userForm.resetFields();
    },
    submitForm(formName) {
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          this.centerDialogVisible = true;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      //this.$refs[formName].resetFields();
      this.$refs.userForm.resetFields();
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 设置父容器的高度为视口高度，使其充满整个屏幕 */
}

.center-container {
  max-width: 600px; /* 设置内部容器的最大宽度，根据需求进行调整 */
}
</style>
